<template>
  <home-nav-bar>
    <div slot="left" class="left" @click="toHotCity">
      <van-icon name="location-o" />
      <p class="cityName-box">{{city}}</p>
    </div>
    <div slot="center">
      <van-search
        shape="round"
        background="#ff5456"
        placeholder="搜索"
        @click="serchHouse"
        autofocus
      />
    </div>
    <div slot="right">
    </div>
  </home-nav-bar>
</template>

<script>
import HomeNavBar from "@/components/common/homenavbar/HomeNavBar";
import { mapState } from "vuex";

export default {
  name: "",
  components: {
    HomeNavBar
  },
  methods: {
    toHotCity() {
      this.$router.push("/hotcity");
    },
    serchHouse() {
      this.$router.push("/serchhouse");
    },
  },
  computed: {
    ...mapState({
      city: (state) => state.moduleHotCity.city
    })
  },
};
</script>

<style scoped>
.serch {
  height: 30px;
  width: 100%;
  border-radius: 20px;
  outline: none;
  border: 1px solid #ccc;
  text-indent: 15px;
  font-size: 13px;
}
.left {
  font-size: 20px;
  position: relative;
}
.left p {
  position: absolute;
  bottom: -15px;
  left: 0;
  right: 0;
  font-size: 10px;
}
.van-search {
  height: 50px;
}
.cityName-box {
  font-size: 5px;
}
</style>